{% extends 'BASE/base.html' %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/Users/account.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Users/users.css' %}" />
{% endblock %}
{% block js %}
{% load static %}

{% endblock %}
{% block title %} 个人中心 {% endblock %}
{% comment %} {% block top_nav %}{% endblock %} {% endcomment %}
{% block main %}
<div class="container-fluid">
	<div class="row justify-content-center">
		<nav class="col-lg-1 col-md-2 d-none d-md-block bg-light sidebar " id="left_sidebar">
			<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="my_info-tab" data-toggle="pill" href="#my_info" role="tab" aria-controls="my_info">
						我的信息
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="my_record-tab" data-toggle="pill" href="#my_record" role="tab" aria-controls="my_record">
						我的历史
					</a>
				</li>
				<li class="nav-item">
                    <a class="nav-link" id="my_collected-tab" data-toggle="pill" href="#my_collected" role="tab"
                       aria-controls="my_collected">
                        我的收藏
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="account_security-tab" data-toggle="pill" href="#account_security" role="tab" aria-controls="account_security">
                        账户安全
                    </a>
                </li>
                <li class="nav-item d-none">
					<a class="nav-link" id="my_wallet-tab" data-toggle="pill" href="#my_wallet" role="tab" aria-controls="my_wallet">
						我的钱包
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="invite-tab" data-toggle="pill" href="#invite" role="tab" aria-controls="invite">
						邀请注册
					</a>
				</li>
			</ul>
		</nav>
		<div class="nav-target col-7">
			<!-- 导航目标 -->
			<div class="tab-content" id="pills-tabContent">
				<!-- 我的信息 -->
				<div class="tab-pane fade show active" id="my_info" role="tabpanel" aria-labelledby="my_info-tab">
					{% include 'Users/my_info.html' %}
				</div>
				<!-- 我的钱包 -->
                <div class="tab-pane fade d-none" id="my_wallet" role="tabpanel" aria-labelledby="my_wallet-tab">
					{% include 'Users/my_wallet.html' %}
				</div>
				<!-- 账户安全 -->
				<div class="tab-pane fade" id="account_security" role="tabpanel" aria-labelledby="account_security-tab">
					{% include 'Users/account_security.html' %}
				</div>
				<!-- 邀请注册 -->
				<div class="tab-pane fade" id="invite" role="tabpanel" aria-labelledby="invite-tab">
					{% include 'Users/invite.html' %}
				</div>
				<!-- 我的记录 -->
				<div class="tab-pane fade" id="my_record" role="tabpanel" aria-labelledby="my_record-tab">
					{% include 'Users/my_record.html' %}
				</div>
                <!-- 我的收藏 -->
                <div class="tab-pane fade" id="my_collected" role="tabpanel" aria-labelledby="my_collected-tab">
                    {% include 'Users/my_collected.html' %}
                </div>
			</div>
		</div>
	</div>
</div>
{% endblock %}
